<template>
  <div class="gradeManage">
    <div class="header">
      <h1>班级列表：</h1>
      <div class="class">
        <template v-for="(item, idx) in classList">
          <span :key="idx">
            <el-button
              type="primary"
              size="medium"
              style="marginRight:10px"
              @click="chooseClass(item)"
              >{{ item.name }}</el-button
            >
          </span>
        </template>
      </div>
    </div>
    <div class="table">
      <h1>成绩表格:</h1>
      <TableList
        :items="tableItems"
        :list="tableList"
        :ListParams="tableParams"
      >
        <template v-slot:operation="data">
          <el-link
            type="primary"
            :style="{ marginRight: '10px' }"
            @click="save(data)"
          >
            保存
          </el-link>
        </template>
      </TableList>
    </div>
  </div>
</template>

<script>
import TableList from '../components/gradeManage/tableList.vue'
export default {
  name: '',
  components: {
    TableList,
  },
  async mounted() {
    this.axios.defaults.headers.common[
      'Authorization'
    ] = window.sessionStorage.getItem('token')
    const a = await this.getPaperGrage(2)
    //获取作业列表
    this.homeworkList = await this.getHomeworkList()
    this.tableItems.push({
      label: '学生姓名',
      prop: 'name',
    })
    this.homeworkList.forEach((el, idx) => {
      this.tableItems.push({
        label: `作业${idx + 1}`,
        prop: `${el.key}`,
      })
    })
    this.tableItems.push({
      label: '作业总成绩',
      prop: 'totalHomework',
    })
    this.tableItems.push({
      label: '考勤',
      prop: 'attendance',
    })
    this.tableItems.push({
      label: '课堂互动',
      prop: 'interaction',
    })
    this.tableItems.push({
      label: '论文成绩',
      prop: 'paperGrade',
    })
    this.tableItems.push({
      label: '总成绩',
      prop: 'total',
    })
    // 获取班级列表
    this.classList = await this.axios.post('/user/query_group/')
    //获取班级人员
    this.classMember = await this.axios.post('/user/query_group_member/', {
      name: this.classList[0].name,
    })
    this.getTableData()
  },
  data() {
    return {
      classList: [],
      classMember: [],
      homeworkList: [],
      tableList: [],
      tableParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableItems: [],
    }
  },
  methods: {
    async getTableData() {
      this.tableList = []
      for (let i = 0; i < this.classMember.length; i++) {
        const obj = { idx: i + 1, name: this.classMember[i].name, edit: false }
        // 总成绩
        let totalHomework = 0
        //各个作业
        const homework = await this.getHomeworkPoint(this.classMember[i].key)
        console.log(this.classMember[i].name, homework)
        homework.forEach(item => {
          for (const el of this.homeworkList) {
            if (el.key === item.key) {
              obj[item.key] = item.point === -1 ? 0 : item.point
              totalHomework += obj[item.key]
            }
          }
        })
        obj.totalHomework = totalHomework
        //考勤成绩
        const attendance = await this.getAttendance(this.classMember[i].key)
        obj.attendance = attendance === -1 ? 0 : attendance
        //课堂互动
        const interaction = await this.getInteraction(this.classMember[i].key)
        obj.interaction = interaction === -1 ? 0 : interaction
        //课堂互动
        const paperGrade = await this.getPaperGrage(this.classMember[i].key)
        obj.paperGrade = paperGrade === -1 ? 0 : paperGrade
        //总成绩
        const total =
          totalHomework + obj.attendance + obj.interaction + obj.paperGrade
        obj.total = total
        //学生id
        obj.keyId = this.classMember[i].key
        console.log(obj)
        this.tableList.push(obj)
      }
    },
    chooseClass(data) {
      this.axios
        .post('/user/query_group_member/', {
          name: data.name,
        })
        .then(res => {
          this.classMember = res
          this.getTableData()
        })
    },
    async getHomeworkList() {
      return this.axios.post('/assess/query_work_list/').then(res => {
        return res
      })
    },
    async getAttendance(studentId) {
      return this.axios
        .post('/assess/query_absence_point/', {
          key: studentId,
        })
        .then(res => res.point)
    },
    async getInteraction(studentId) {
      return this.axios
        .post('/assess/query_class_point/', {
          key: studentId,
        })
        .then(res => res.point)
    },
    async getPaperGrage(studentId) {
      return this.axios
        .post('/assess/query_paper_point/', {
          key: studentId,
        })
        .then(res => res.point)
    },
    async getHomeworkPoint(studentId) {
      return this.axios
        .post('/assess/query_work_point/', {
          key: studentId,
        })
        .then(res => {
          return res
        })
    },
    async save(data) {
      data = data.data
      data.edit = false
      const p1 = this.axios.post('/assess/absence_point/', {
        key: data.keyId,
        point: data.attendance,
      })
      const p2 = this.axios.post('/assess/class_point/', {
        key: data.keyId,
        point: data.interaction,
      })
      const p3 = this.axios.post('/assess/paper_point/', {
        key: data.keyId,
        point: data.paperGrade,
      })
      await Promise.all([p1, p2, p3])
      this.getTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
.gradeManage {
  padding: 20px;
  .class {
    max-width: 1000px;
    margin-bottom: 30px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    span {
      display: inline-block;
    }
  }
}
</style>
